<template>
  <div>
    <el-card>
      <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
      <div id="dial"
           style="width: 600px;height:400px;"></div>
    </el-card>
  </div>
</template>
<script>
import * as echarts from 'echarts'

export default {
  data () {
    return {

    }
  },
  methods: {
  },
  created () {
  },
  mounted () {
    // 基于准备好的dom，初始化echarts实例
    var chartDom = document.getElementById('dial');
    var myChart = echarts.init(chartDom);

    // 指定图表的配置项和数据
    var option;

    option = {
      title: {
        text: '当月账单统计',
        subtext: '纯属虚构',
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left',
      },
      series: [
        {
          name: '收费项',
          type: 'pie',
          radius: '50%',
          data: [
            { value: 50, name: '水费' },
            { value: 40, name: '电费' },
            { value: 50, name: '气费' },
            { value: 80, name: '停车费' },
            { value: 100, name: '物业管理费' }
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };

    // 使用刚指定的配置项和数据显示图表。
    option && myChart.setOption(option);
  }
}
</script>
